---
title: Breakpoints
description: This page outlines how to create responsive layouts by configuring the Sass variables and using the provided Sass mixins, React Hooks, and React Components.
docType: Guides
docGroup: Customization
group: Breakpoints
---

# Breakpoints

The default `react-md` styles do not use media queries to change the styles
depending on the viewport size. However, there is built-in support for determining
the current app size using the following breakpoints:

- `phone` - `(max-width: 47.9375em)` (about `767px`)
- `tablet` - `(min-width: 48em)` (about `788px`)
- `tablet-only` - `(min-width: 48em and max-width: 64em)` (about `788px` to `1024px`)
- `desktop` - `(min-width: 64.0625em)` (about `1025px`)
- `large-desktop` - `(min-width: 80em)` (about `1280px`)

## Usage

These breakpoints can be leveraged in CSS files using media query mixins or in
React components using the [useAppSize hook](/hooks/use-app-size).

The media query mixins are recommended if the goal is to reduce the total JS
served to the client and dynamic rendering is not required. If different
experiences are required between mobile and desktop, the `useAppSize` hook is
recommended instead. The following mixins are provided:

| Mixin                 | Media Query                                                                                 |
| --------------------- | ------------------------------------------------------------------------------------------- |
| `phone-media`         | `@media screen and (max-width: ${$phone-max-width})`                                        |
| `tablet-media`        | `@media screen and (min-width: #{$tablet-min-width})`                                       |
| `tablet-only-media`   | `@media screen and (min-width: #{$tablet-min-width}) and (max-width: #{$tablet-max-width})` |
| `desktop-media`       | `@media screen and (min-width: #{$desktop-min-width})`                                      |
| `large-desktop-media` | `@media screen and (min-width: #{$large-desktop-min-width})`                                |

Here's a quick example using the media query mixins:

```scss compile
@use "@react-md/core";

.example {
  width: 100%;

  @include core.phone-media {
    color: red;
  }

  @include core.tablet-media {
    width: 50%;
  }

  @include core.tablet-only-media {
    border: 1px solid red;
  }

  @include core.desktop-media {
    width: 40%;
  }

  @include core.large-desktop-media {
    width: 30%;
  }
}
```

### Configuration

The breakpoints can be configured by changing the following Sass variables:

```scss
@use "@react-md/core" with (
  $phone-max-width: 47.9375em !default,
  $tablet-min-width: 48em !default,
  $tablet-max-width: 64em !default,
  $desktop-min-width: 64.0625em !default,
  $large-desktop-min-width: 80em !default
);
```

If the Sass variables were updated, the `MEDIA_QUERY_CONFIG` needs to be
updated to match using `configureMediaQueries`:

```diff fileName="src/rmdConfig.tsx"
 import { type ReactMDCoreConfiguration } from "@react-md/core/CoreProviders";
 import { configureIcons } from "@react-md/core/icon/config";
+import { configureMediaQueries } from "@react-md/core/media-queries/config";
 import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
 import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
 ...

 configureIcons({
   back: <KeyboardArrowLeftIcon />,
   clear: <ClearIcon />,
   close: <CloseIcon />,
   checkbox: <CheckBoxOutlineBlankIcon />,
   checkboxChecked: <CheckBoxIcon />,
   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,
   dropdown: <ArrowDropDownIcon />,
   error: <ErrorOutlineIcon />,
   expander: <KeyboardArrowDownIcon />,
   forward: <KeyboardArrowRightIcon />,
   menu: <MenuIcon />,
   notification: <NotificationsIcon />,
   password: <RemoveRedEyeIcon />,
   radio: <RadioButtonUncheckedIcon />,
   radioChecked: <RadioButtonCheckedIcon />,
   remove: <CancelIcon />,
   selected: <CheckIcon />,
   sort: <ArrowUpwardIcon />,
   upload: <FileUploadIcon />,
 });

+configureMediaQueries({
+  phoneMaxWidth: "new_value",
+  tabletMinWidth: "new_value",
+  tabletMaxWidth: "new_value",
+  desktopMinWidth: "new_value",
+  desktopLargeMinWidth: "new_value",
+});
+
 export const rmdConfig: ReactMDCoreConfiguration = {
   ssr: true,
 };
```
